<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>财务</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="./css/finance.css">
</head>
<body>
<div id="backstage" class="layui-layout layui-layout-admin">
    <union-header :header="header"></union-header>
    <uniocn-side :side="side"></uniocn-side>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="finance-com">
            <div class="finance-title">
                <p>
                    <span>成交总金额:999</span>
                    <span>最高成交额:999</span>
                </p>
                <p>
                    <button class="layui-btn layui-btn-sm layui-btn-danger">2018-08-16 19:20更新</button>
                    <button class="layui-btn layui-btn-sm " style="vertical-align: middle">
                        <i class="layui-icon layui-icon-refresh"
                           style="font-size: 24px; color: #fff;vertical-align: middle"></i>刷新
                    </button>
                </p>
            </div>
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li>时间筛选</li>
                    <li class="layui-this">今天</li>
                    <li>最近7天</li>
                    <li>最近30天</li>
                    <li>全部</li>
                </ul>
            </div>
            <div class="finance-modular" style="background: #F8F8F8">
                <blockquote class="layui-elem-quote">总览</blockquote>
                <ul class="finance-ul clearFloat">
                    <li class="finance-li">
            <span style="vertical-align: middle">订单总金额(元)<i class="layui-icon layui-icon-about"></i>
            </span>
                        <span class="price">￥6.66</span>
                    </li>
                    <li class="finance-li">
            <span style="vertical-align: middle">订单总数<i class="layui-icon layui-icon-about"></i>
            </span>
                        <span class="price">￥6.66</span>
                    </li>
                    <li class="finance-li">
            <span style="vertical-align: middle">已完成订单金额(元)<i class="layui-icon layui-icon-about"></i>
            </span>
                        <span class="price">￥6.66</span>
                    </li>
                    <li class="finance-li borderNone">
            <span style="vertical-align: middle">未完成订单金额(元)<i class="layui-icon layui-icon-about"></i>
            </span>
                        <span class="price">￥6.66</span>
                    </li>
                    <li class="finance-li">
            <span style="vertical-align: middle">平台提成收入(元)<i class="layui-icon layui-icon-about"></i>
            </span>
                        <span class="price">￥6.66</span>
                    </li>
                    <li class="finance-li">
            <span style="vertical-align: middle">已结算金额(元)<i class="layui-icon layui-icon-about"></i>
            </span>
                        <span class="price">￥6.66</span>
                    </li>
                    <li class="finance-li">
            <span style="vertical-align: middle">未结算金额(元)<i class="layui-icon layui-icon-about"></i>
            </span>
                        <span class="price">￥6.66</span>
                    </li>
                    <li class="finance-li borderNone">
            <span style="vertical-align: middle">总退款(元)<i class="layui-icon layui-icon-about"></i>
            </span>
                        <span class="price">￥6.66</span>
                    </li>
                </ul>
            </div>
            <div class="finance-modular">
                <blockquote class="layui-elem-quote">会员卡</blockquote>
                <ul class="finance-ul clearFloat">
                    <li class="finance-li">
            <span style="vertical-align: middle">订单总金额(元)<i class="layui-icon layui-icon-about"></i>
            </span>
                        <span class="price">￥6.66</span>
                    </li>
                    <li class="finance-li">
            <span style="vertical-align: middle">订单总数<i class="layui-icon layui-icon-about"></i>
            </span>
                        <span class="price">￥6.66</span>
                    </li>
                    <li class="finance-li">
            <span style="vertical-align: middle">已完成订单金额(元)<i class="layui-icon layui-icon-about"></i>
            </span>
                        <span class="price">￥6.66</span>
                    </li>
                    <li class="finance-li borderNone">
            <span style="vertical-align: middle">未完成订单金额(元)<i class="layui-icon layui-icon-about"></i>
            </span>
                        <span class="price">￥6.66</span>
                    </li>
                </ul>
            </div>
            <div class="finance-modular">
                <blockquote class="layui-elem-quote">商户</blockquote>
                <table class="layui-table" lay-skin="line">
                    <colgroup>
                        <col width="30%">
                        <col width="30%">
                        <col width="30%">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>商户名称</th>
                        <th>交易额</th>
                        <th>所占比列</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <input class="shopInput" type="text" value="a">
                            <span class="shopAgent" style="color: #D9534F;">
                                <i class="layui-icon layui-icon-triangle-d"></i>
                                商家</span>
                        </td>
                        <td>0元</td>
                        <td class="agentTd" style="padding-left: 5px">
                            <input class="agentInput" type="text" value="0.00%" disabled></td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <table class="finance-table layui-table" lay-skin="row">
                                <colgroup>
                                    <col width="30%">
                                    <col width="30%">
                                    <col width="30%">
                                </colgroup>
                                <tr>
                                    <td class="shopImg-td">
                                        <div class="shopImg">
                                            <img src="./images/userImg.png" alt="">
                                        </div>
                                        <input type="text" class="shopInput2" value="a-1">
                                    </td>
                                    <td>0元</td>
                                    <td class="agentInput2"><input type="text" value="0.00%" disabled></td>
                                </tr>
                                <tr>
                                    <td class="shopImg-td">
                                        <div class="shopImg">
                                            <img src="./images/userImg.png" alt="">
                                        </div>
                                        <input type="text" class="shopInput2" value="a-1">
                                    </td>
                                    <td>0元</td>
                                    <td class="agentInput2"><input type="text" value="0.00%" disabled></td>
                                </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input class="shopInput" type="text" value="a">
                            <span class="shopAgent" style="color: #D9534F;">
                                <i class="layui-icon layui-icon-triangle-d"></i>
                                商家</span>
                        </td>
                        <td>0元</td>
                        <td class="agentTd" style="padding-left: 5px"><input class="agentInput" type="text"
                                                                             value="0.00%" disabled></td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <table class="finance-table layui-table" lay-skin="row">
                                <colgroup>
                                    <col width="30%">
                                    <col width="30%">
                                    <col width="30%">
                                </colgroup>
                                <tr>
                                    <td class="shopImg-td">
                                        <div class="shopImg">
                                            <img src="./images/userImg.png" alt="">
                                        </div>
                                        <input type="text" class="shopInput2" value="a-1">
                                    </td>
                                    <td>0元</td>
                                    <td class="agentInput2"><input type="text" value="0.00%" disabled></td>
                                </tr>
                                <tr>
                                    <td class="shopImg-td">
                                        <div class="shopImg">
                                            <img src="./images/userImg.png" alt="">
                                        </div>
                                        <input type="text" class="shopInput2" value="a-1">
                                    </td>
                                    <td>0元</td>
                                    <td class="agentInput2"><input type="text" value="0.00%" disabled></td>
                                </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/vue2.5.16.js"></script>
<script src="layui/layui.js"></script>
<script src="./js/public.js"></script>
<script src="js/data.js"></script>
<script>
    new Vue({
        el: "#backstage",
        data: {
            header: data.header,
            side:data.side,
        }
    })
    $('.shopAgent').on('click', function () {
        $(this).parents('tr').next().toggle()
    })
</script>
</body>
</html>